<script lang="ts" setup>
import TableArea from 've-table-area/index.vue'
import TableColumn from 've-table-column/index.vue'
import {tableHeight} from '@/assets/js/tableHeight'

import {CirclePlus, Delete, Edit, VideoPause, VideoPlay} from '@element-plus/icons-vue'
import {computed, ref} from 'vue'
//@ts-ignore
import JsonViewer from 'vue-json-viewer'
import {createEmitter} from "@/assets/js/eventBus.ts";
import {TaskInfoVo} from "@/interface/vo/task/TaskInfoVo.ts";
import {convertStrToStr} from "@/assets/js/common.ts";

const emitter = createEmitter()

const props = defineProps({
  loading: {
    type: Boolean,
    required: true,
    default: () => false
  },
  tableData: {
    type: Array as () => Array<TaskInfoVo>,
    required: true,
    default: () => []
  }
})

const columnList = computed(() => [
  {
    fixed: true,
    sortable: 'custom',
    prop: 'title',
    width: '200',
    label: '标题'
  },
  {
    fixed: true,
    sortable: 'custom',
    prop: 'appName',
    label: '执行器名称'
  },
  {
    sortable: 'custom',
    prop: 'cancelled',
    coverColumn: true,
    label: '是否已取消'
  },
  {
    sortable: 'custom',
    prop: 'done',
    coverColumn: true,
    label: '是否已完成'
  },
  {
    sortable: 'custom',
    prop: 'createTime',
    label: '创建时间'
  }
])

const selected = ref<Array<TaskInfoVo>>([])

const onSelectionChange = (val: TaskInfoVo[]) => {
  selected.value = val
}

const onSortChange = (column: any) => {
  emitter.emit('refresh', column)
}

const handleRefresh = () => {
  emitter.emit('refresh')
}

const _fullScreen = ref(false)

const _tableHeight = ref()

const handleFullScreen = (fullScreen: boolean, tableHeight: number) => {
  _fullScreen.value = fullScreen
  _tableHeight.value = tableHeight
}

const emits = defineEmits(['onTableClick'])

const handleClick = (type: string, id: string = '') => {
  emits('onTableClick', type, id)
}

</script>

<template>
  <TableArea>
    <template #header>
      <el-button
          :icon="CirclePlus"
          type="primary"
          @click="handleClick('add')">
        新增
      </el-button>
    </template>
    <template #main>
      <el-table v-loading="props.loading"
                :data="props.tableData"
                :default-sort="{ prop: 'createTime', order: 'descending' }"
                :height="_fullScreen? _tableHeight: tableHeight"
                border
                @selection-change="onSelectionChange"
                @sort-change="onSortChange">
        <TableColumn
            :column-list="columnList"
            :expand="true"
            :index="false"
            :table-height="tableHeight"
            region-class="ve-table"
            @handle-full-screen="handleFullScreen"
            @handle-refresh="handleRefresh">
          <template #expand="scope">
            <el-descriptions :column="2" border direction="vertical">
              <el-descriptions-item>
                <template #label>
                  <strong>下一次执行时间</strong>
                </template>
                {{ scope.row.nextExecutionTime }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <strong>下一次执行时间</strong>
                </template>
                {{ scope.row.cron }}
              </el-descriptions-item>
              <el-descriptions-item :span="2">
                <template #label>
                  <strong>任务参数</strong>
                </template>
                <json-viewer :value="convertStrToStr(scope.row.taskParam)" copyable
                             theme="my-awesome-json-theme"/>
              </el-descriptions-item>
            </el-descriptions>
          </template>
          <template #cancelled="scope">
            <el-switch
                v-model="scope.row.cancelled"
                active-text="是"
                inactive-text="否"
                disabled
                inline-prompt
            />
          </template>
          <template #done="scope">
            <el-switch
                v-model="scope.row.done"
                active-text="是"
                inactive-text="否"
                disabled
                inline-prompt
            />
          </template>
          <template #default="scope">
            <el-button
                v-if="scope.row.cancelled"
                :icon="VideoPlay"
                plain
                size="small"
                type="primary"
                @click="handleClick('start', scope.row.id)">
              启动
            </el-button>
            <el-button
                v-if="!scope.row.cancelled"
                :icon="VideoPause"
                plain
                size="small"
                type="primary"
                @click="handleClick('stop', scope.row.id)">
              暂停
            </el-button>
            <el-button
                :icon="Edit"
                plain
                size="small"
                type="primary"
                @click="handleClick('edit', scope.row.id)">
              修改
            </el-button>
            <el-button
                :icon="Delete"
                plain
                size="small"
                type="danger"
                @click="handleClick('delete', scope.row.id)">
              删除
            </el-button>
          </template>
        </TableColumn>
      </el-table>
      <slot name="pagination"/>
    </template>
  </TableArea>
</template>

<style scoped>

</style>
